<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<body>
    <div th:replace="common/IncludeTop">
    </div>

    <div id="Content">

        <div id="BackLink">
            <a href="/catalog/view">Return to Main Menu</a>
        </div>

        <script src="../js/jquery-3.4.1.js"></script>
        <script>
            var xhr;
            function checkUsername() {
                var username=document.getElementById("username").value;

                if(window.XMLHttpRequest){
                    xhr=new XMLHttpRequest();
                }else{
                    xhr=new ActiveXObject("Microsoft.XMLHTTP");
                }

                xhr.onreadystatechange = process;
                xhr.open("GET","usernameIsExist?username="+username,true)
                xhr.send(null);
            }

            function process() {

                if(xhr.readyState==4&&xhr.status==200){
                    var responseInfo = xhr.responseText;
                    var msg = document.getElementById("isExistInfo");
                    var submit = document.getElementById("submit");
                    if(responseInfo == "Exist"){
                        msg.classList.add("erromsg");
                        msg.innerText = "The user name is not available";
                        msg.style.color = "red";
                        submit.setAttribute("disabled","disabled");
                    }
                    else if(responseInfo == "Not Exist"){
                        msg.classList.add("okmsg");
                        msg.innerText = "The user name is available";
                        msg.style.color = "blue";
                        submit.removeAttribute("disabled");
                    }
                }
            }

        </script>

        <div th:id="Catalog">
            <form action="/account/register" method="post">
                <h3>User Information</h3>
                <table>
                    <tr>
                        <td>User ID:</td>
                        <td><input th:type="text" th:name="username" th:id="username" th:onblur="checkUsername()"><br><span th:id="isExistInfo" th:name="usernameIsAvailable" th:value="available"></span></td>
                    </tr>
                    <tr>
                        <td>New password:</td>
                        <td><input th:type="password" th:name="password"></td>
                    </tr>
                    <tr>
                        <td>Repeat password:</td>
                        <td><input th:type="password" th:name="repeatedPassword"></td>
                    </tr>
                </table>

                <div th:replace="account/IncludeAccountFields">
                </div>

                <input th:type="submit" th:value="'Save Account Information'" th:id="submit" th:disabled="disabled">
<!--                <font color="red">${requestScope.msg}</font>-->
                <font th:color="red" th:id="message"></font>
            </form>
        </div>
    </div>

    <div th:replace="common/IncludeBottom">
    </div>
</body>
</html>